<!-- 系统管理 - 流程监控中心 -->
<template>
  <div class="process-monitor-center">
    <!-- 顶部工具栏 -->
    <div class="monitor-header">
      <div class="header-left">
        <h1 class="monitor-title">
          <el-icon class="title-icon"><Monitor /></el-icon>
          流程监控中心
        </h1>
        <div class="system-info">
          <el-tag type="success" size="small">
            <el-icon><Check /></el-icon>
            系统正常
          </el-tag>
          <el-tag type="info" size="small">{{ formatTime(currentTime) }}</el-tag>
        </div>
      </div>

      <div class="header-actions">
        <el-button-group class="action-group">
          <el-button size="small" @click="refreshAll">
            <el-icon><Refresh /></el-icon>
            刷新监控
          </el-button>
          <el-button size="small" @click="exportReport">
            <el-icon><Document /></el-icon>
            导出报告
          </el-button>
          <el-button size="small" type="primary" @click="openSettings">
            <el-icon><Setting /></el-icon>
            监控设置
          </el-button>
        </el-button-group>
      </div>
    </div>

    <!-- 主监控区域 -->
    <div class="monitor-content">
      <!-- 左侧全链路追踪面板 -->
      <el-aside :width="leftPanelWidth" class="left-panel">
        <div class="panel-container">
          <FullChainTrace />
        </div>
        
        <!-- 面板调整器 -->
        <div
            class="panel-resizer left-resizer"
            @mousedown="startResize('left', $event)"
        ></div>
      </el-aside>

      <!-- 右侧资源监控面板 -->
      <el-main class="main-panel">
        <div class="panel-container">
          <ResourceMonitor />
        </div>
      </el-main>
    </div>

    <!-- 底部状态栏 -->
    <div class="monitor-footer">
      <div class="status-left">
        <div class="status-item">
          <el-icon><Connection /></el-icon>
          <span>连接状态: {{ connectionStatus }}</span>
        </div>
        <div class="status-item">
          <el-icon><Timer /></el-icon>
          <span>运行时长: {{ uptime }}</span>
        </div>
        <div class="status-item">
          <el-icon><DataBoard /></el-icon>
          <span>处理记录: {{ processedCount.toLocaleString() }}</span>
        </div>
      </div>

      <div class="status-right">
        <div class="alert-indicator">
          <el-icon class="alert-icon" :class="{ active: hasAlerts }"><Warning /></el-icon>
          <span class="alert-text">{{ alertCount }} 个告警</span>
        </div>
        <div class="performance-indicator">
          <el-icon class="perf-icon" :class="{ active: performanceGood }"><Connection /></el-icon>
          <span class="perf-text">{{ performanceText }}</span>
        </div>
      </div>
    </div>

    <!-- 设置对话框 -->
    <el-dialog v-model="settingsVisible" title="监控设置" width="40vw">
      <el-form :model="settings" label-width="8vw">
        <el-form-item label="刷新间隔">
          <el-select v-model="settings.refreshInterval" style="width: 100%">
            <el-option label="1秒" :value="1000" />
            <el-option label="2秒" :value="2000" />
            <el-option label="5秒" :value="5000" />
            <el-option label="10秒" :value="10000" />
          </el-select>
        </el-form-item>
        <el-form-item label="告警阈值">
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input-number v-model="settings.cpuThreshold" :min="1" :max="100" />
              <span style="margin-left: 8px; color: #8591a3;">CPU %</span>
            </el-col>
            <el-col :span="12">
              <el-input-number v-model="settings.memoryThreshold" :min="1" :max="100" />
              <span style="margin-left: 8px; color: #8591a3;">内存 %</span>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item label="自动导出">
          <el-switch v-model="settings.autoExport" />
          <span style="margin-left: 8px; color: #8591a3;">每日自动导出报告</span>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="settingsVisible = false">取消</el-button>
          <el-button type="primary" @click="saveSettings">保存</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 全局快捷键提示 -->
    <div class="shortcut-tips" v-if="showShortcuts">
      <div class="tips-header">
        <span>快捷键</span>
        <el-button size="small" text @click="showShortcuts = false">
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
      <div class="tips-content">
        <div class="tip-item">
          <kbd>F5</kbd> 刷新监控
        </div>
        <div class="tip-item">
          <kbd>Ctrl</kbd> + <kbd>E</kbd> 导出报告
        </div>
        <div class="tip-item">
          <kbd>F1</kbd> 快捷键帮助
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, onBeforeUnmount } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Monitor,
  Check,
  Refresh,
  Document,
  Setting,
  Connection,
  Timer,
  DataBoard,
  Warning,
  Close
} from '@element-plus/icons-vue'

// 导入子组件
import FullChainTrace from './components/monitor/FullChainTrace.vue'
import ResourceMonitor from './components/monitor/ResourceMonitor.vue'

// UI状态
const leftPanelWidth = ref('50vw')
const currentTime = ref(new Date())
const settingsVisible = ref(false)
const showShortcuts = ref(false)

// 系统状态
const connectionStatus = ref('正常')
const uptime = ref('12天 5小时 32分钟')
const processedCount = ref(1234567)
const alertCount = ref(2)
const hasAlerts = computed(() => alertCount.value > 0)
const performanceGood = ref(true)

// 设置数据
const settings = reactive({
  refreshInterval: 2000,
  cpuThreshold: 80,
  memoryThreshold: 85,
  autoExport: true
})

// 面板调整大小相关
let isResizing = false
let resizeType = null
let startX = 0
let startWidth = 0

// 计算属性
const performanceText = computed(() => {
  return performanceGood.value ? '良好' : '一般'
})

// 格式化时间
const formatTime = (date) => {
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit'
  })
}

// 顶部工具栏操作
const refreshAll = () => {
  ElMessage.success('监控数据已刷新')
  // 这里可以触发子组件的刷新方法
}

const exportReport = () => {
  const reportData = {
    timestamp: new Date().toISOString(),
    systemStatus: {
      connection: connectionStatus.value,
      uptime: uptime.value,
      processedCount: processedCount.value
    },
    alerts: alertCount.value,
    performance: performanceGood.value
  }

  const dataStr = JSON.stringify(reportData, null, 2)
  const blob = new Blob([dataStr], { type: 'application/json' })
  const url = URL.createObjectURL(blob)

  const link = document.createElement('a')
  link.href = url
  link.download = `监控报告_${Date.now()}.json`
  link.click()

  URL.revokeObjectURL(url)
  ElMessage.success('监控报告已导出')
}

const openSettings = () => {
  settingsVisible.value = true
}

const saveSettings = () => {
  ElMessage.success('设置已保存')
  settingsVisible.value = false
  // 这里可以保存设置到本地存储或服务器
}

// 面板调整大小
const startResize = (type, event) => {
  isResizing = true
  resizeType = type
  startX = event.clientX
  startWidth = parseInt(leftPanelWidth.value)

  document.addEventListener('mousemove', handleResize)
  document.addEventListener('mouseup', stopResize)
  document.body.style.cursor = 'col-resize'
}

const handleResize = (event) => {
  if (!isResizing) return

  const deltaX = event.clientX - startX
  const newWidth = Math.max(30, Math.min(70, startWidth + (deltaX / window.innerWidth) * 100))
  leftPanelWidth.value = `${newWidth}vw`
}

const stopResize = () => {
  isResizing = false
  resizeType = null
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
  document.body.style.cursor = 'default'
}

// 键盘快捷键
const handleKeydown = (event) => {
  if (event.key === 'F5') {
    event.preventDefault()
    refreshAll()
  } else if (event.ctrlKey && event.key === 'e') {
    event.preventDefault()
    exportReport()
  } else if (event.key === 'F1') {
    event.preventDefault()
    showShortcuts.value = !showShortcuts.value
  } else if (event.key === 'Escape') {
    showShortcuts.value = false
    settingsVisible.value = false
  }
}

// 生命周期钩子
onMounted(() => {
  document.addEventListener('keydown', handleKeydown)

  // 模拟系统状态更新
  setInterval(() => {
    currentTime.value = new Date()
    performanceGood.value = Math.random() > 0.2
    processedCount.value += Math.floor(Math.random() * 50)
  }, 5000)
})

onBeforeUnmount(() => {
  document.removeEventListener('keydown', handleKeydown)
  document.removeEventListener('mousemove', handleResize)
  document.removeEventListener('mouseup', stopResize)
})
</script>

<style scoped>
/* 适配侧边栏布局的样式 */
* {
  box-sizing: border-box;
}

.process-monitor-center {
  width: 96vw;
  height: 100vh;
  background: #1f2d3d;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: 'Microsoft YaHei', sans-serif;
  position: absolute;
  top: 0;
  left: 4vw;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 顶部工具栏 */
.monitor-header {
  height: 7vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5vh 2vw;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(15px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.monitor-title {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  gap: 1vw;
}

.title-icon {
  font-size: 1.6rem;
  color: var(--el-color-primary);
}

.system-info {
  display: flex;
  align-items: center;
  gap: 0.8vw;
}

.header-actions {
  display: flex;
  gap: 1vw;
}

.action-group .el-button {
  height: 3.5vh;
  font-size: 0.85rem;
}

/* 主监控区域 */
.monitor-content {
  flex: 1;
  display: flex;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

/* 左侧面板 */
.left-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  position: relative;
  min-width: 30vw;
  max-width: 70vw;
  flex-shrink: 0;
  transition: width 0.3s ease;
  overflow: hidden;
  box-sizing: border-box;
}

/* 主面板 */
.main-panel {
  flex: 1;
  padding: 0;
  background: rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

.panel-container {
  height: 100%;
  padding: 2vh;
}

/* 面板调整器 */
.panel-resizer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.5vw;
  background: rgba(255, 255, 255, 0.1);
  cursor: col-resize;
  z-index: 10;
  transition: background 0.3s ease;
}

.left-resizer {
  right: -0.2vw;
}

.panel-resizer:hover {
  background: rgba(74, 144, 226, 0.5);
}

/* 底部状态栏 */
.monitor-footer {
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2vw;
  background: #1f2d3d;
  border-top: 1px solid #2d3a4b;
  font-size: 0.8rem;
}

.status-left, .status-right {
  display: flex;
  align-items: center;
  gap: 2vw;
}

.status-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
  color: #bfcbd9;
}

.alert-indicator {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.alert-icon {
  font-size: 0.9rem;
  color: var(--el-color-info);
  transition: color 0.3s ease;
}

.alert-icon.active {
  color: var(--el-color-warning);
  animation: pulse 2s infinite;
}

.alert-text {
  font-size: 0.8rem;
  color: #bfcbd9;
}

.performance-indicator {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

.perf-icon {
  font-size: 0.9rem;
  color: var(--el-color-warning);
  transition: color 0.3s ease;
}

.perf-icon.active {
  color: var(--el-color-success);
}

.perf-text {
  font-size: 0.8rem;
  color: #bfcbd9;
}

/* 快捷键提示 */
.shortcut-tips {
  position: fixed;
  top: 10vh;
  right: 2vw;
  background: #263445;
  border: 1px solid #2d3a4b;
  border-radius: 0.8vh;
  padding: 1.5vh;
  box-shadow: 0 0.5vh 2vh rgba(0, 0, 0, 0.3);
  z-index: 1000;
  min-width: 15vw;
}

.tips-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1vh;
  font-weight: 600;
  color: #bfcbd9;
}

.tips-content {
  display: flex;
  flex-direction: column;
  gap: 0.8vh;
}

.tip-item {
  font-size: 0.8rem;
  color: #bfcbd9;
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

kbd {
  background: #1f2d3d;
  border: 1px solid #2d3a4b;
  border-radius: 0.3vh;
  padding: 0.2vh 0.5vw;
  font-size: 0.7rem;
  font-family: 'Monaco', 'Consolas', monospace;
  color: #bfcbd9;
}

/* 动画效果 */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* 响应式设计 */
@media (max-width: 1400px) {
  .left-panel {
    min-width: 35vw;
    max-width: 65vw;
  }
}

@media (max-width: 1200px) {
  .monitor-title {
    font-size: 1.2rem;
  }

  .system-info {
    display: none;
  }

  .status-left .status-item:nth-child(n+3) {
    display: none;
  }
  
  .left-panel {
    min-width: 40vw;
    max-width: 60vw;
  }
}

@media (max-width: 768px) {
  .monitor-header {
    height: 8vh;
  }

  .left-panel {
    min-width: 45vw;
    max-width: 55vw;
  }

  .shortcut-tips {
    right: 1vw;
    min-width: 40vw;
  }
}

/* Element Plus 组件深色主题覆盖 */
.process-monitor-center :deep(.el-button) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.process-monitor-center :deep(.el-button:hover) {
  background: #2d3a4b !important;
  border-color: #409EFF !important;
  color: #409EFF !important;
}

.process-monitor-center :deep(.el-button--primary) {
  background: #409EFF !important;
  border-color: #409EFF !important;
  color: #ffffff !important;
}

.process-monitor-center :deep(.el-button--primary:hover) {
  background: #66B2FF !important;
  border-color: #66B2FF !important;
}

.process-monitor-center :deep(.el-tag) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  color: #bfcbd9 !important;
}

.process-monitor-center :deep(.el-tag--success) {
  background: #1f4838 !important;
  border-color: #2d5a41 !important;
  color: #67C23A !important;
}

.process-monitor-center :deep(.el-tag--info) {
  background: #1f2d3d !important;
  border-color: #2d3a4b !important;
  color: #909399 !important;
}

.process-monitor-center :deep(.el-dialog) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
}

.process-monitor-center :deep(.el-dialog__header) {
  background: #1f2d3d !important;
  border-bottom: 1px solid #2d3a4b !important;
  color: #bfcbd9 !important;
}

.process-monitor-center :deep(.el-dialog__body) {
  background: #263445 !important;
  color: #bfcbd9 !important;
}

.process-monitor-center :deep(.el-form-item__label) {
  color: #bfcbd9 !important;
}

.process-monitor-center :deep(.el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

.process-monitor-center :deep(.el-input__inner) {
  background: #263445 !important;
  color: #bfcbd9 !important;
}

.process-monitor-center :deep(.el-select .el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

.process-monitor-center :deep(.el-input-number .el-input__wrapper) {
  background: #263445 !important;
  border-color: #2d3a4b !important;
  box-shadow: 0 0 0 1px #2d3a4b inset !important;
}

.process-monitor-center :deep(.el-switch__core) {
  background: #2d3a4b !important;
  border-color: #2d3a4b !important;
}

.process-monitor-center :deep(.el-switch.is-checked .el-switch__core) {
  background: #409EFF !important;
  border-color: #409EFF !important;
}

/* 确保所有文本颜色统一 */
.process-monitor-center :deep(*) {
  color: #bfcbd9;
}

.process-monitor-center :deep(.el-icon) {
  color: #bfcbd9 !important;
}
</style>

<!-- 全局样式覆盖，用于处理挂载到body的Element Plus组件 -->
<style>
.el-select-dropdown {
  background: #263445 !important;
  border-color: #2d3a4b !important;
}

.el-select-dropdown__item {
  background: #263445 !important;
  color: #bfcbd9 !important;
}

.el-select-dropdown__item:hover {
  background: #2d3a4b !important;
  color: #409EFF !important;
}

.el-select-dropdown__item.selected {
  background: #409EFF !important;
  color: #ffffff !important;
}
</style>